<template>
  <div class="notice-content">
    <div class="noticelist" v-for="(item,index) in items" :key="index">
      <div class="jiushibox">
        <h1 class="tit">{{ item.title }}</h1>
        <div class="timebox">
          <p>{{ item.time }}</p>
          <!-- <p>{{ item.num }}人已读</p> -->
        </div>
        <div class="noticedesc">
          <p>{{ item.content }}</p>
        </div>
        <div class="removebtn">
          <span @click="Suk_del(index)">删除</span>
        </div>
      </div>
    </div>
    <img src="@/assets/img/none.png" class="nomeimg" v-if="nocontent == true">
    <div class="addadv" @click="Suk_tosetnotice">新增公告</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nocontent: false,
      items: [] //这里是我们的公告列表
    };
  },
  beforeCreate: function() {
    //创建前
  },
  activated() {
    this.Suk_getlist();
  },
  created: function() {
    let that = this;
    that.Suk_getlist();
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {

    Suk_tonewdis(){
      let that = this
      that.$router.push({
        name:'newdis'
      })
    },
    Suk_tosetnotice() {
      this.$router.push({
        name: "setnotice"
      });
    },
    //   下面的是我们的删除操作
    Suk_del(index) {
      let that = this;
      let delid = that.items[index].id;
      that.$dialog
        .confirm({
          title: "提醒",
          message: "是否开始营业？"
        })
        .then(() => {
          that.$toast.loading({
            message: "加载中..."
          });
          var Sukdata = {
            id: delid
          };
          console.log(Sukdata);
          that.axios
            .post(
              that.baseUrl + "/notice/delecteNotice",
              that.Qs.stringify(Sukdata),
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              }
            )
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  console.log(res.data);
                  that.Suk_getlist();
                  that.$toast.clear();
                } else if (res.data.meta.code == 501) {
                }
              }
            });
        });
    },
    Suk_getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        din_id: localStorage.getItem("myshopid")
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/notice/getNotice", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data.data.length);
              if (res.data.data.length == 0) {
                that.nocontent = true;
              }
              console.log(res.data);
              that.items = res.data.data;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.notice-content {
  font-size: 0.3rem;
  background: #f0f0f0;
  padding-bottom: 17rem;
}
input {
  background: #fff;
}
.jiushibox {
  width: 90%;
  margin: 0 auto;
  .tit {
    font-weight: 500;
    font-size: 0.5rem;
  }
  .timebox {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    p {
      display: inline-block;
      margin-bottom: 0.1rem;
    }
  }
  .noticedesc {
    margin-top: 0.1rem;
    line-height: 0.6rem;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #f0f0f0;
  }
  .removebtn {
    text-align: right;
    margin-top: 0.1rem;
    span {
      display: inline-block;
      width: 1.8rem;
      height: 0.7rem;
      line-height: 0.7rem;
      color: #fff;
      text-align: center;
      background: #fe9a0f;
      border-radius: 0.1rem;
    }
  }
}

.noticelist {
  background: #fff;
  padding-bottom: 0.1rem;
  margin-bottom: 0.3rem;
  // box-shadow: 0rem 0.1rem 0.5rem 0.01rem #9e9e9e
}
.addadv {
  position: fixed;
  bottom: 0;
  height: 1.5rem;
  width: 100%;
  text-align: center;
  line-height: 1.5rem;
  color: #fff;
  font-size: 0.5rem;
  border-top-right-radius: 0.4rem;
  border-top-left-radius: 0.4rem;
  background: #fe9a0f;
}

.nomeimg {
  width: 100%;
}
</style>
